<template>
  <div class="swiper-card">
    <div
      :class="{'isHeight':!searchMore}"
      class="swiper-nav"
    >
      <span
        v-for="(tabsItem,index) in tabsTextNav"
        :key="index"
        @click="selectNav(tabsItem)"
        :class="{'activeNav':tabsItem.bkId==activeBkId}"
      >{{ tabsItem.text }}</span>
      <i
        v-if="showTriangle"
        :class="{'turnIcon':!searchMore}"
        @click="searchMore=!searchMore"
        class="jeicon jeicon-arrow-down-two swiper-icon-more"
      />
    </div>
    <div
      class="swiper-card-content"
    >
      <!--此处是搜索-->
      <swiper-search />
      <p
        v-if="dataing"
        class="loadingData je-loader-wrapper je-loader"
      >
        <i class="jeicon jeicon-loading" />
        数据加载中
      </p>
      <ul
        v-if="swiperCard.length"
        class="swiper-card-item infinite-list"
        style="overflow:auto;"
      >
        <li
          v-for="(cardItem,index) in swiperCard"
          :key="index"
          class="swiper-news-type1 swiper-news-type"
        >
          <div
            :class="{'isRead':cardItem.isYd=='1'}"
            class="swiper-news-type1-tit"
          >
            <span
              v-if="cardItem.isZd"
              class="swiper-top"
            >【置顶】</span>
            <span
              @click="showDetail(cardItem)"
              class="swiper-top-bt"
            ><span
              v-html="cardItem.bt"
              class="bt"
            /><span v-if="cardItem.isShowTime">
              <!-- {{ cardItem.turnTime }} -->
            </span></span>
          </div>
          <!--全文字-->
          <template v-if="cardItem.type=='ZY'">
            <div class="swiper-news-type1-con">
              <span
                v-html="cardItem.con"
                @click="showDetail(cardItem)"
              /><i
                @click="showDetail(cardItem)"
                class="swiper-i"
              >[详细]</i>
            </div>
          </template>
          <!--全图-->
          <template v-if="cardItem.type=='DT'">
            <div class="swiper-news-type1-img">
              <span
                v-for="imgItem in cardItem.img"
                @click="showDetail(cardItem)"
                :key="imgItem"
                class="swiper-news-type1-con swiper-news-type1-simg"
              >
                <img :src="imgItem">
              </span>
            </div>
          </template>
          <!--半图半文字-->
          <template v-if="cardItem.type=='DTZY'">
            <div class="swiper-news-type1-img">
              <span
                @click="showDetail(cardItem)"
                style="width:500px;height:300px;overflow:hidden;cursor: pointer;"
              >
                <img
                  :src="cardItem.img"
                  class="swiper-img-half"
                ></span>
              <div
                class="swiper-news-type1-con"
                style="flex:1"
              >
                <div
                  v-html="cardItem.con"
                  @click="showDetail(cardItem)"
                  style="display:inline"
                />
                <i
                  v-if="cardItem.con"
                  @click="showDetail(cardItem)"
                >[详细]</i>
              </div>
            </div>
          </template>
          <div class="swiper-news-type1-bottom">
            <span><i>{{ cardItem.partName }}</i> · <i>{{ cardItem.userName }}</i></span>
            <span>{{ cardItem.time }}</span>
            <span>{{ cardItem.ydsl }}阅</span>
            <span>{{ cardItem.plsl }}评</span>
            <span>{{ cardItem.dzsl }}赞</span>
            <span style="border:none">附件 ({{ cardItem.fj }})</span>
            <span class="cardbk-name">{{ cardItem.bkname }}</span>
          </div>
        </li>
        <li
          v-show="loadMore&&swiperCard.length!=0&&swiperCard.length>=10"
          class="swiper-load-more"
        >
          -----------无更多数据---------
        </li>
      </ul>
      <p
        v-if="nodata"
        class="nodata"
      >
        <img
          src="../../assets/images/je-nodata.png"
          alt=""
          srcset=""
        >
        <span>暂无数据</span>
      </p>
      <p
        v-if="loadingData&&!loadMore"
        class="loading-data"
      >
        加载中...
      </p>
    </div>
    <img
      v-show="backTopIcon"
      @click="backTop"
      class="backTop"
      src="../../assets/images/rock.png"
    >
  </div>
</template>
<script>
import searchMatch from 'pinyin-match';
import swiperSearch from '../../components/search';
import { fetchFirstLeveRoute, fetchSearchNews, fetchSingleNews } from '../../common/portal';
import { EventBus } from '../../common/eventBus';
import { COMMON } from '../../common/params';

export default {
  name: 'TabsPage',
  components: {
    swiperSearch,
  },
  props: {
    mhId: {
      default: '',
      type: String,
    },
  },
  data() {
    return {
      activeBkId: '',
      tabsTextNav: [],
      dataing: true,
      navData: {}, // 二级导航
      searchMore: true,
      loadMore: false,
      swiperCard: [],
      searchData: {},
      nodata: false,
      backTopIcon: false,
      loadingData: false,
      showTriangle: false,
      onFetching: false, // 防止页面滑动时多次加载
      num: 0,
    };
  },
  mounted() {
    this.getpage();
    EventBus.$on(COMMON.SEARCHLIST, async (target) => {
      if (target.JE_MHXW_MH_ID == this.mhId) {
        this.searchData = target;
        this.dataing = true;
        this.$set(this, 'swiperCard', []);
        const data = await fetchSearchNews(this.searchData);
        if (target.XW_BT) {
          data.map((dataItem) => {
            const searchArray = searchMatch.match(dataItem.bt, target.XW_BT);
            dataItem.bt = dataItem.bt.replace(dataItem.bt.substr(searchArray[0], searchArray[1] - searchArray[0] + 1), `<span style='color:red;'>${dataItem.bt.substr(searchArray[0], searchArray[1] - searchArray[0] + 1)}</span>`);
          });
        }
        this.$set(this, 'swiperCard', data);
        if (this.swiperCard.length) {
          this.nodata = false;
          this.dataing = false;
          if (this.swiperCard.length < 20) {
            this.loadingData = false;
          }
        } else {
          this.nodata = true;
          this.dataing = false;
          this.loadingData = false;
        }
        this.swiperCard.length == 0 ? this.$set(this, 'loadMore', false) : '';
      }
    });
    EventBus.$on(COMMON.BACKFROMDETAIL, (target) => {
      this.refreshNews(target);
    });
    document.querySelector('.swiper-height').addEventListener('scroll', () => {
      //  这里响应加载数据
      this.scrollLoad();
    });
    window.addEventListener('mousewheel', () => {
      if (this.swiperCard.length < 20) {
        this.loadMore = true;
        EventBus.$emit(COMMON.SCROLLLOAD);
      }
    }, false);
    this.$nextTick(() => {
      setTimeout(() => {
        const spanArray = document.querySelectorAll(`#mhpage${this.mhId} .swiper-nav span`);
        const widthData = [];
        if (spanArray.length > 4) {
          spanArray.forEach((span) => {
            widthData.push(span.offsetWidth);
          // if(widthData>880){
          //   console.log('超过')
          // }
          });
          for (let i = 0; i < widthData.length; i++) {
            this.num = 0;
            const width = this.getSum(this.num, widthData);
            if (width >= 880) {
              this.$set(this, 'showTriangle', true);
            }
          }
        }
      }, 2000);
    });
  },
  methods: {
    backTop() {
      const timer = setInterval(() => {
        if (document.querySelector('.swiper-height').scrollTop <= 0) {
          document.querySelector('.swiper-height').scrollTop = 0;
          document.querySelector('.swiper-height').scrollTop = 0;
          this.backTopIcon = false;
          clearInterval(timer);
          return;
        }
        document.querySelector('.swiper-height').scrollTop -= 200;
        document.querySelector('.swiper-height').scrollTop -= 200;
      }, 1);
    },
    getSum(num, array) {
      const that = this;
      for (let i = 0; i < array.length; i++) {
        num += Number(array[i]);
      }
      return num;
    },
    scrollLoad() {
      const scrollHeight = document.querySelector('.swiper-height').scrollHeight || document.querySelector('.swiper-height').scrollHeight; // document的滚动高度
      const nowScotop = document.documentElement.clientHeight || document.body.clientHeight; // 可视区高度
      const wheight = document.querySelector('.swiper-height').scrollTop || document.querySelector('.swiper-height').scrollTop; // 已滚动高度
      EventBus.$emit(COMMON.SCROLHIDE, !(wheight > 50));
      wheight > 50 ? this.backTopIcon = true : this.backTopIcon = false;
      if (nowScotop >= scrollHeight - wheight - 5) {
        this.onFetching = true;
        setTimeout(() => {
          console.log('这里到底了奥！！');
          EventBus.$emit(COMMON.SCROLLLOAD);
          this.loadingData = true;
          this.load();
          this.onFetching = false;
        }, 500);
      }
    },
    async refreshNews(id) {
      const newsData = await fetchSingleNews({ JE_MHXW_XW_ID: id });
      const index = this.swiperCard.findIndex(cardItem => cardItem.newsId == id);
      if (index >= 0) {
        this.swiperCard[index].ydsl = newsData.newsYdsl;
        this.swiperCard[index].dzsl = newsData.newsDzsl;
        this.swiperCard[index].isYd = newsData.newsIsyd;
        this.swiperCard[index].plsl = newsData.newsPlsl;
        this.$set(this, this.swiperCard[index], this.swiperCard[index]);
      }
    },
    async load() {
      // 此处处理无限加载
      this.searchData.start += 20;
      const SearchNews = await fetchSearchNews(this.searchData);

      if (SearchNews.length) {
        SearchNews.map((items) => {
          this.swiperCard.push(items);
        });
        this.loadingData = false;
        this.loadMore = false;
      } else {
        this.loadingData = false;
        this.loadMore = true;
      }
    },
    selectNav(navItem) {
      this.activeBkId = navItem.bkId;
      EventBus.$emit(COMMON.SEARCHTAB, navItem);
      this.navLoading = false;
    },
    async getpage() {
      const firstLevenew = new Promise((async (resolve, reject) => {
        const tabsText = await fetchFirstLeveRoute({ JE_MHXW_MH_ID: this.mhId });
        tabsText.unshift({
          text: '全部',
          bkId: '',
          mhId: this.mhId,
          ejbk: [],
        });
        this.tabsTextNav = tabsText;

        EventBus.$emit(COMMON.SEARCHTAB, this.tabsTextNav[0]);
        if (tabsText.length) {
          resolve(tabsText);
        } else {
          reject(tabsText);
        }
      }));
    },
    showDetail(data) {
      EventBus.$emit(COMMON.NEWSDEATIL, data.newsId);
    },
    searchResult(data) {
      this.navLoading = false;
      this.swiperCard = data;
    },
  },
};
</script>
<style lang="scss" scoped>
  .swiper-card{
    width: 100%;
    display: flex;
    flex-direction: column;
    .backTop{
      position:fixed;
      bottom: 120px;
      left:86%;
      cursor: pointer;
      width: 50px;
      height: 80px;
    }
    .nodata,.loadingData{
      display: flex;
      color: #999;
    }
    .nodata{
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width:150px;
      height:220px;
      font-size:16px;
      margin: 120px auto 0;
      img{
        width:100%;
      }
    }
    .je-loader-wrapper {
      position: relative;
      margin-top:150px;font-size:30px;
      i{
        font-size: 25px;
      }
    }
    .loading-data{
      height:30px;
      line-height: 30px;
      text-align: center;
      color: #fff;
      background: #e6e6e6;
      width: 80%;
      margin:0 auto;
    }
    .je-loader {
      width: 100%;
      flex:1;
      font-size: 20px;
      line-height: 1;
      justify-content: center;
      font-weight: bold;
      font-family: "黑体";
      text-align: left;
      text-indent: 5px;
      background: -webkit-linear-gradient(left, #e6e6e6, #8e8c8c 50%, #e6e6e6);
      color: transparent;
      -webkit-background-clip: text;
      background-size: 200% 100%;
      animation: masked-animation 1.5s infinite linear;
    }
      @-webkit-keyframes masked-animation {
        0% {
            background-position:0 0;
        }
        100% {
            background-position:-100% 0;
        }
      }
    .loadingData img{
      width:200px;
      height:200px;
    }
    .swiper-nav{
      background: #fff;
      line-height: 30px;
      padding: 4px 10px;
      position: relative;
      height:40px;
      min-height: 40px;
      overflow: hidden;
      border-radius: 4px;
      span{
        padding: 2px 18px;
        display: inline-block;
        color: #909399;
        font-size:14px;
        cursor: pointer;
      }
      .swiper-icon-more{
        position: absolute;
        right:8px;
        top:6px;
        color: #909399;
        cursor: pointer;
        font-style: normal;
        font-weight: bold;
      }
      .turnIcon{
        transform: rotate(180deg);
        color: #007aff;
      }
      .activeNav{
        color: #007aff;
      }
    }
    .isHeight{
      height: initial;
    }
    .el-tabs--border-card{
      background:transparent;
      border:none;
    }
    .swiper-card-content{
      width:100%;
      margin-top:20px;
      background:#fff;
      border-radius: 4px;
      padding:20px ;
      // display: flex;
      flex:1;
      // flex-direction: column;
      .swiper-card-item{
        list-style: none;
        padding:5px 10px;
        margin:0;
        flex:1;
        // overflow: hidden;
        .swiper-load-more{
          color: #999;
          text-align: center;
          line-height: 30px;
        }
        .swiper-news-type1{
            display: flex;
            flex-direction: column;
          }
        .swiper-news-type{
          padding:15px 10px;
          -webkit-transition: all .2s linear;
          transition: all .2s linear;
          &:hover{
            box-shadow: 0 0 7px 0 rgba(0,0,0,.15);
            background: #fff
          }
          .swiper-i{
            color: #007aff;
            font-style:normal;
            cursor: pointer;
            font-size: 14px;
          }
          .swiper-news-type1-tit{
            font-weight: 500px;
            color: #3F3F3F;
            font-size:18px;
            cursor: pointer;
            display: flex;
            font-weight: 900;
          }

          .swiper-top-bt{
            display: flex;
            justify-content:space-between;
            flex:1;
            .bt{
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
              max-width: 82%;
            }
          }
          .swiper-news-type1-tit.isRead{
            color: #999999;
          }
          .swiper-news-type1-tit:hover{
            color: #007aff;
          }
          .swiper-news-type1-con{
              color:#999;
              font-size:14px;
              margin:10px 0 0 0 ;
              cursor: pointer;
              line-height: 20px;
              i{
                color: #007aff;
                font-style:normal;
              }
              img{
                flex: 1;
                margin-right:10px;
                width:100%;
                height: 92px;
              }
          }
          .swiper-news-type1-img{
            display: flex;
            margin:10px 0;
            .swiper-img-half{
              width: 500px;
              border-radius: 4px;
              -webkit-transition: all 1s;
              transition: all 1s;
              &:hover{
                -webkit-transform: scale(1.04);
                transform: scale(1.04)
              }
            }
            .swiper-news-type1-con{
              margin-left:10px;
              // flex:1;
              overflow: hidden;
              border-radius: 4px;
              cursor: pointer;
            }
            .swiper-news-type1-simg{
              margin-left:0;
              margin-right:10px;
              width: 145px;
              height: 120px;
              -webkit-transition: all 1s;
              transition: all 1s;
              &:hover{
                -webkit-transform: scale(1.04);
                transform: scale(1.04)
              }
            }
          }
          .swiper-news-type1-bottom{
            font-size: 12px;
            color: #999;
            margin-top:10px;
            span{
              padding:0 14px;
              border-right:1px solid #eee;
              i{
                font-style: normal;
              }
            }
            span:first-child{
              padding-left: 0;
            }
            .cardbk-name{
              float: right;
              border: 1px solid #ff6f45;
              border-radius: 4px;
              padding: 2px 4px;
              color: #ff6f45;
            }
          }
        }
      }
    }
  }
</style>
